<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学号+姓名+家乡美景</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            background: #fff;
        }
        h2 {
            font-family: "方正舒体", serif;
            text-align: center;
            color: #2E7D32;
            margin-bottom: 20px;
        }
        hr {
            width: 90%;
            margin: 20px auto;
            border: none;
            border-top: 1px solid #4CAF50;
        }
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            padding: 20px;
        }
        .image-container {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .image-container img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .image-container:hover img {
            transform: scale(1.05);
        }
        .image-map {
            position: relative;
            margin: 20px 0;
        }
        .image-map img {
            width: 100%;
            max-width: 800px;
            display: block;
            margin: 0 auto;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 图片交换功能
            let isAlternate = false;
            $('#switchImage').click(function() {
                if (!isAlternate) {
                    $(this).attr('src', 'https://img.zcool.cn/community/01639e5d3fe23fa801211d53f71ac1.jpg');
                } else {
                    $(this).attr('src', 'https://pic.616pic.com/bg_w1180/00/04/08/6S88PICMN6.jpg');
                }
                isAlternate = !isAlternate;
            });
        });
    </script>
</head>
<body>
    <h2>美丽的家乡--XXX</h2>
    <hr>
    
    <div class="image-gallery">
        <!-- 可切换图片 -->
        <div class="image-container">
            <img id="switchImage" src="https://pic.616pic.com/bg_w1180/00/04/08/6S88PICMN6.jpg" alt="家乡风景1" title="点击切换图片">
        </div>
        
        <!-- 带热区的图片 -->
        <div class="image-map">
            <img src="https://img.zcool.cn/community/01c2125d3fe240a801211d53e30a20.jpg" alt="家乡风景3" usemap="#scenicMap">
            <map name="scenicMap">
                <area shape="rect" coords="0,0,200,200" href="scenic_detail1.html" alt="景点1">
                <area shape="circle" coords="300,150,100" href="scenic_detail2.html" alt="景点2">
                <area shape="poly" coords="500,0,600,100,500,200" href="scenic_detail3.html" alt="景点3">
            </map>
        </div>
        
        <!-- 其他风景图片 -->
        <div class="image-container">
            <img src="https://img.zcool.cn/community/0122c85d3fe241a801211d53f1387f.jpg" alt="家乡风景4">
        </div>
    </div>
</body>
</html> 